IFrame Video Setup (type 1)

Website template built-in video support

Built-in template video
Support for Allwebco templates with video IFrames (type 1). See the help.html included with your template download for the correct options and support links. If you have this type of video, your website download should include a folder named video with 4 sub-folders inside this folder.

Outdated: See video overview for current video integration support.

Video file types
File types used in the video message popup can be .wmv, .wma, .wav, .mp3, .au, .mpg, .mov or any other web compliant audio or video format.

IFrame video code
This support page is only for templates with video IFrames (type 1). See the sidebar links on this page for other video types. Inside your template "video" folder you will see four subfolders.



Overview: About the code
Files, images and video files you will need to edit for the IFrame video can be found in the subfolders in the "video" folder (folders video1 through video4). The pages that have the embedded IFrame are in your main template folder and named "video1.htm" through "video4.htm". Fonts colors and sizes for the video IFrames are found in the template CSS file.

How the IFrame works
In your main template folder you should see a file named "video1.htm". This is the page that includes only the frame code. You will not need to edit this page. This page includes an "embedded" HTML page named "video1-select.htm". The "video1-select.htm" page is located in the "video/video1" folder. The "video1-select.htm" includes the text, media select links and images you are seeing on the "video1.htm".

Setup video1 EXAMPLE:

1. In your template "video/video1" subfolder, edit the "video1-select.htm". This is the only .htm page you need to edit for video1.
2. Edit the "video1-select.jpg" with any .jpg image you would like.
3. Replace the "video1.mov" and the "video1.wmv" files with your video files.
4. Edit the sizes of your videos by editing the "video1-quicktime.js" and "video1-winmedia.js" files.
5. In your main template folder open the "video1.htm" and test your videos.

What is the IFrame doing?
When you open the "video1.htm" page in your main template folder, the subfolder "video/video1/video1-select.htm" page is embedded inside this page. When you click the "Windows Media" link the page inside the IFrame changes to the "video/video1/video1-winmedia.htm" page. For the "Quicktime" link the page changes to the "video/video1/video1-quicktime.htm". The "video1.htm" page is not changing, only the page embedded in the "video1.htm" page is changing to display the video.

How many .htm pages for each video?
There are 4 pages used for each video. In the main template folder the "video#.htm" page. In the "video/video#" folder are 3 .htm pages.

Changing the video file type | Click for .js file help
To change the file to use for the video IFrames edit the "video#-quicktime.js" and "video#-winmedia.js" in the "video/video#" subfolder. Edit the "video1.wmv" or "video1.mov" variable near the top of these .js files. or For Windows Media it's best to use a .wmv or .wma file for video, and mp3 for audio. For the Quicktime player it's best to use a .mov file for video and a .mp3 for audio. An .mpg video file should work for both if you do not want two file types. Place your movie or audio files in the "video/video#" folder.

Editing the video area sizes | Click for .js file help
To resize the video area edit the "video#-quicktime.js" and "video#-winmedia.js" files in the "video/video#" subfolder. The sizes are the height and width variables at the top. They should be at a width of 320 and height of 256 or 305 in your original download. You can edit these numbers. Windows Media controls are 65 high and QuickTime controls are 16 high.

Graphics
Each "video#-select.htm" page includes a graphic named "video#-select.jpg" located in the "video/video#" subfolder.

The "video#-select.htm" pages
Each video includes a "video#-select.htm" page. This page can be edited with any text or images you would like.

IFrame Sizes
If you need more room on the page for your videos or your pages or videos are being cut-off, edit the "VIDEO PAGES CODE" area in your template CSS file.

Adding new video pages
You can copy the existing code to add more videos. Here are the steps.

1. In the "video" folder: Make a copy of the "video1" folder and all files in this folder.
2. Rename this new folder "video5".
3. Rename all files in this folder replacing the "1" in each name with a "5".
4. Open the "video5-quicktime.js" and edit the "video1.mov" to "video5.mov".
5. Open the "video5-winmedia.js" and edit the "video1.wmv" to "video5.wmv".
6. Edit the three new .htm pages in the "video5" folder to use the new "5" files. Replace "video1" with "video5" in multiple places in all 3 .htm pages.
7. In the main template folder, make a copy of the "video1.htm". Rename it to "video5.htm".
8. Open the "video5.htm" page and search for "video/video1/video1-select.htm" in one place. Change this to "video/video5/video5-select.htm" to link to your new "select5" page in the "video5" subfolder.
9. Edit the template menu files and site map to link to your new "video5.htm".
10. Test all pages and links.

Video editing software:
You can use "Windows Movie Maker" included with most versions of Windows. Check the Microsoft Movie Maker Website for details. Movie maker can edit .avi and .mpg movies, however, this is a limited version of the software and does not include a lot of editing options.

The following software includes many more video editing options including animated captions, better transitions as well as .flv conversion for Flash video.

• Corel VideoStudio
• Adobe Premiere Elements
• Adobe Premiere Pro